<template>
    <div class="house-type-9">
        <img :src="houseData.image.url" alt="">
        <div class="explain">
            <div class="summary">{{ houseData.summaryText }}</div>
            <div class="name">{{ houseData.houseName }}</div>
            <div class="price-score">
                <van-rate v-model="commentScore"
                          readonly allow-half size="16px" />
                <span class="price">¥{{ houseData.finalPrice }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
    houseData:{
        type:Object,
        default:() => ({})
    }
})

const commentScore = computed(() => {
    return Number(props.houseData.commentScore)
})
</script>


<style lang='less' scoped>
.house-type-9 {
    position: relative;
    width: 48%;
    margin-bottom: 6px;
    img {
        width: 100%;
        border-radius: 10px;
    }
    .explain {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 6px;
        color: #fff;
        .summary {
            font-size: 13px;
        }
        .name {
            font-size: 14px;
            margin: 6px 0;
            // 两行文本溢出隐藏
            overflow:hidden; 
            text-overflow:ellipsis;
            display:-webkit-box; 
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2; 
        }
        .price-score {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
}
</style>